<template>
    <div class="price-content">
        <div class="w1200">
            <!-- <div class="price-header">
                <img src="https://image.lutongjiakao.com/system/4b2b3892f3c542beb68b1da1f8b0fcb5.jpg" alt="">
            </div> -->
            <div class="price-title">立即搭建驾校管理系统</div>
            <div class="price-desc">可根据您的驾校规模和需求，选择不同的套餐、版本和部署方式</div>
            <div class="price-type">
                <div class="price-cards">
                    <div v-for="(item, idx) in priceList" :key="item.title" :class="[
                        'price-card',
                        { 'hot': item.hot, 'private': item.private }
                    ]">
                        <div class="card-header">
                            <span class="card-title">{{ item.title }}</span>
                            <span v-if="item.hot" class="hot-tag">热卖推荐</span>
                        </div>
                        <div class="card-subtitle" v-if="item.subtitle">{{ item.subtitle }}</div>
                        <div class="flex flex-align-center">
                            <div class="card-originalPrice">原价{{ item.originalPrice }}</div>
                            <div class="card-discount">{{ item.discount }}</div>
                        </div>
                        <div class="card-price">
                            <span class="price-symbol">￥</span>
                            <span class="price-value">{{ item.price }}</span>
                            <span class="price-unit">/{{ idx === 0 ? '7天' : '年' }}</span>
                        </div>
                        <div class="card-btn">
                            <div :class="['order-btn', { 'private-btn': item.private }]" @click="toRegister(idx)"
                                class="cursor">
                                {{ idx === 0 ? '免费试用' : '立即购买' }}
                            </div>
                        </div>
                        <ul class="card-features">
                            <li v-for="(feature, i) in item.features" :key="i">
                                <span class="checkmark"><el-icon>
                                        <Check />
                                    </el-icon>
                                </span>
                                <span class="card-feature">{{ feature }}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="price-title">为您的驾校提供全方位售后服务</div>
            <div class="feature-section">
                <div class="feature-item">
                    <img class="feature-icon"
                        src="https://image.lutongjiakao.com/system/a474f404efb04b72affc6cdd962dfe2b.png" alt="" />
                    <div class="feature-title">专业售后服务</div>
                    <div class="feature-desc">提供不同的驾校规模专业建议和在线答疑服务，助您找到最佳解决方案</div>
                </div>
                <div class="feature-item">
                    <img class="feature-icon"
                        src="https://image.lutongjiakao.com/system/9f27ce71115143a7b91c0ffd2888bd91.png" alt="" />
                    <div class="feature-title">高效服务保障</div>
                    <div class="feature-desc">帮助客户快速推动项目上线，完成初始化配置、组织架构搭建、系统培训等，保证系统高效使用。</div>
                </div>
                <div class="feature-item">
                    <img class="feature-icon"
                        src="https://image.lutongjiakao.com/system/e95fc8d0a1ff4bca8b15e85d73d4832f.png" alt="" />
                    <div class="feature-title">7x24小时技术支持</div>
                    <div class="feature-desc">专属售后服务群，真实人工在线7*12小时实时响应， 不间断不定时客户维护关怀。</div>
                </div>
            </div>
            <div class="faq-section">
                <div class="faq-title">常见问题</div>
                <ul class="faq-list">
                    <li class="faq-item" v-for="(qa, i) in faqList" :key="i">
                        <div class="faq-header" @click="toggleFaq(i)">
                            <div class="faq-question" :class="{ 'faq-question-open': qa.open }">{{ i + 1 }}、{{ qa.q }}
                            </div>
                            <div class="faq-arrow" :class="{ open: qa.open }">
                                <el-icon>
                                    <ArrowDown />
                                </el-icon>
                            </div>
                        </div>
                        <div class="faq-answer" v-show="qa.open">
                            <div class="faq-answer-content" v-html="qa.a"></div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <consult v-if="showConsult" @close="showConsult = false" />
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import consult from '@/components/consult.vue';

const showConsult = ref(false);

const priceList = ref([
    {
        title: '试用版',
        subtitle: '免费试用七天，提供驾校基础管理功能，页面简洁易用',
        price: 0,
        originalPrice: 3980,
        discount: '免费试用',
        features: [
            '驾校基础功能',
            '微信小程序',
            '学员管理',
            '运营分析',
            '专享售前咨询服务'
        ]
    },
    {
        title: '基础版',
        subtitle: '适用于个体户或10人以下小型驾校 / 挂靠报名点等',
        price: 3980,
        originalPrice: 4980,
        discount: '8折',
        features: [
            '驾校基础功能',
            '微信小程序',
            '微信公众号',
            'Windows学员端',
            '自定义题库',
            '基础营销功能',
            '专享售后群服务',
            '线上1v1培训指导讲解'
        ]
    },
    {
        title: '专业版',
        subtitle: '适合于10人以上中型驾校 / 分校连锁等',
        price: 7980,
        originalPrice: 12800,
        discount: '6.2折',
        hot: true,
        features: [
            '驾校基础功能',
            '微信小程序',
            '微信公众号',
            'Windows学员端',
            '自定义题库',
            '高级营销功能(包含十余种插件)',
            '自定义版权为您打造独家品牌',
            '专享售后群服务',
            '线上1v1培训指导讲解'
        ]
    },
    {
        title: '旗舰版',
        subtitle: '适合于联盟 / 集团型经营模式 / 较大规模驾校等',
        private: true,
        price: 19800,
        originalPrice: 26800,
        discount: '7.4折',
        phone: '400-101-5851',
        qrcode: 'https://api.qrserver.com/v1/create-qr-code/?size=80x80&data=RayLink',
        features: [
            '驾校基础功能',
            '微信小程序',
            '微信公众号',
            'IOS苹果端 / 安卓端',
            'Windows学员端',
            '自定义题库',
            '高级营销功能(包含十余种插件)',
            '自定义版权为您打造独家品牌',
            '专享SVIP售后群服务',
            '专家1v1培训指导讲解'
        ]
    }
])

const faqList = ref([
    {
        q: '能否免费试用系统功能？',
        a: '可以的，绿通云智慧驾校支持7天免费试用。若您在使用的过程中碰到问题，请联系我们。',
        open: false
    },
    {
        q: '各个系统版本的区别在哪里？系统功能多久更新一次？',
        a: '各个系统版本的区别主要在一些营销插件以及版权自定义等方面;我们承诺每周迭代小版本更新,每月迭代大版本更新。',
        open: false
    },
    {
        q: '若已购买基础版,可以升级到专业版或者旗舰版吗？',
        a: '可以的，如需要升级更高级版本，请联系您的商务经理或在线客服。',
        open: false
    }
])

const toggleFaq = (index: number) => {
    const item = faqList.value[index]
    if (!item) return
    item.open = !item.open
}
const toRegister = (i: any) => {
    if (i === 0) {
        window.open('https://www.lutongjiakao.com/admin/#/register')
    } else {
        showConsult.value = true
    }
}
</script>
<style lang="scss" scoped>
@use 'sass:math';

@function rem($px) {
    @return math.div($px, 16) * 1rem;
}

.price-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background: url('https://image.lutongjiakao.com/system/6a1ed2a6fd5c4af19e9bce1eda2c74e0.png') right top / contain no-repeat;
}

.price-title {
    text-align: center;
    font-weight: 800;
    font-size: rem(32);
    color: #111;
    margin: rem(100) 0 rem(20);

    span {
        color: rgb(37, 207, 107);
    }
}

.price-desc {
    font-size: rem(14);
    color: #7D8995;
    font-weight: 400;
    text-align: center;
}

.price-header {
    margin: rem(100) 0 rem(115);

    img {
        width: rem(511.5);
        height: rem(108.75);
    }
}

.w1200 {
    width: rem(900);
    margin: 0 auto;
}

.price-type {
    margin-top: rem(40);
}

.price-cards {
    display: flex;
    justify-content: space-between;
    gap: rem(20);
    width: 100%;
}

.price-card {
    background: #fff;
    border-radius: rem(16);
    box-shadow: 0 2px 8px 0 rgba(31, 35, 41, 0.06);
    padding: rem(28) rem(20) rem(24);
    width: rem(260);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: box-shadow 0.2s;
    border: 1.5px solid transparent;

    // &.hot {
    //     box-shadow: 0 4px 16px 0 rgba(61, 124, 255, 0.10);
    // }

    // &.private {
    //     border: 1.5px solid #e3e8f7;
    //     background: #f8faff;
    // }

    .hot-tag {
        position: absolute;
        top: 0;
        right: 0;
        background: #ff6b00;
        color: #fff;
        font-size: rem(12);
        font-weight: 700;
        border-radius: 0 rem(16) 0 0;
        padding: rem(2) rem(12);
        z-index: 2;
        box-shadow: 0 2px 8px 0 rgba(255, 107, 0, 0.10);
    }
}

.card-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: rem(8);
    min-height: rem(32);

    .card-title {
        font-size: rem(18);
        font-weight: 700;
        color: rgb(37, 207, 107);
    }
}

.card-subtitle {
    width: 100%;
    font-size: rem(10);
    color: rgb(100, 106, 115);
    margin-bottom: rem(18);
    text-align: left;
    min-height: rem(36);
    line-height: 1.5;
}

.card-qrcode {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    margin-bottom: rem(10);

    img {
        width: rem(48);
        height: rem(48);
        border-radius: rem(6);
        border: 1px solid #e3e8f7;
        background: #fff;
    }
}

.card-price {
    width: 100%;
    display: flex;
    align-items: baseline;
    margin-bottom: rem(5);
    font-size: rem(28);
    font-weight: 700;
    color: #222;

    .price-symbol {
        font-size: rem(18);
        color: #000;
        margin-right: rem(2);
    }

    .price-value {
        font-size: rem(30);
        color: #222;
        font-weight: 700;
        margin-right: rem(4);
    }

    .price-unit {
        font-size: rem(13);
        color: rgb(33, 33, 33);
        font-weight: bold;
        margin-left: rem(2);
    }
}

.card-originalPrice {
    font-size: rem(12);
    font-weight: 500;
    color: rgb(180, 180, 180);
    text-decoration: line-through;
}

.card-discount {
    height: 18px;
    padding: 0px 4px;
    line-height: 18px;
    font-size: 13px;
    text-align: center;
    border-radius: 3px;
    color: rgb(255, 255, 255);
    background: linear-gradient(102.89deg, rgb(250, 144, 84) 0.25%, rgb(255, 73, 33) 99.75%);
    margin-left: 5px;
}

.card-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: rem(18);

    .order-btn {
        width: 100%;
        background: rgb(37, 207, 107);
        color: #fff;
        text-align: center;
        font-size: rem(12);
        padding: rem(8) 0;
        border-radius: rem(4);
    }
}

.card-features {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: rem(9);

    .checkmark {
        font-size: rem(10);
        color: rgb(37, 207, 107);
        font-weight: 500;
    }

    .card-feature {
        font-size: rem(11);
        color: #222;
        margin-left: rem(5);
    }
}

.feature-section {
    width: 100%;
    background: #fff;
    border-radius: rem(12);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: rem(40);
    margin-top: rem(60);
    padding: rem(36) rem(32) rem(24) rem(32);
    box-sizing: border-box;
    gap: rem(30);

    .feature-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        min-width: 0;
    }

    .feature-icon {
        width: rem(56);
        height: rem(56);
        margin-bottom: rem(16);
        object-fit: contain;
        filter: drop-shadow(0 2px 8px rgba(61, 124, 255, 0.08));
        /* 你可以根据实际图片调整 */
    }

    .feature-title {
        font-size: rem(18);
        font-weight: 600;
        color: #222;
        margin-bottom: rem(8);
        letter-spacing: 0.5px;
    }

    .feature-desc {
        font-size: rem(13);
        color: #666;
        line-height: 1.7;
        word-break: break-all;
    }
}

.faq-section {
    width: 100%;
    margin-top: rem(16);
    padding: rem(12) 0 rem(40);

    .faq-title {
        font-size: rem(25);
        font-weight: 500;
        color: #222;
        margin: rem(8) 0 rem(20);
        text-align: center;
    }

    .faq-list {
        list-style: none;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }

    .faq-item {
        border-bottom: 1px solid #eef2f8;

        &:last-child {
            border-bottom: none;
        }
    }

    .faq-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: rem(14) rem(16);
        cursor: pointer;
        color: #1f2d3d;

        .faq-question {
            font-size: rem(14);
        }

        .faq-arrow {
            transition: transform 0.2s ease;
            color: #9aa4b2;

            &.open {
                transform: rotate(180deg);
            }
        }
    }

    .faq-answer {
        padding: 0 rem(16) rem(14) rem(16);
        color: #5f6b7a;
        font-size: rem(13);
        line-height: 1.8;


        .faq-answer-content {
            white-space: pre-line;
        }
    }

    .faq-question-open {
        color: rgb(37, 207, 107);
    }
}
</style>